<template>
   <div>
     <div class="header">
        <div class="item">
           <router-link to="/discovery">发现音乐</router-link>
        </div>
        <div class="item">
          <router-link to="/my">我的音乐</router-link>
        </div>
        <div class="item">
           <router-link to="/friend">关注</router-link>
        </div>
     </div>
     <div>
        <router-view></router-view>
     </div>
   </div>
</template>

<script>
/*
 vue-router的跳转方式有两种
 1、声明式路由跳转:通过router-link标签来实现跳转，主要用在<template>中，将来会被编译成<a>标签
 2、编程式路由跳转:通过this.$router的相关方法来实现路由跳转的，主要是用在script代码部分
*/
export default {

}
</script>

<style lang="scss">
  *{
    margin: 0px;
    padding: 0px;
  }
  .header{
    display: flex;
    align-items: center;
    width: 100vw;
    height: 70px;
    background-color: #000;
    .item{
      width: 95px;
      height: 100%;
      a{
        box-sizing: border-box;
        display: block;
        color: white;
        height: 100%;
        line-height: 70px;
        text-decoration: none;
        margin: 0 10px;
      }
    }
  }
</style>